<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户中心-注册</title>
		<link rel="shortcut icon" href="favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
		<link rel="stylesheet" type="text/css" href="css/bottom.css"/>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="js/cookie.js" ></script>
		<script type="text/javascript" src="js/extend.js" ></script>
		<script>
			$(function(){
				$("#footer .bottom .bottom-bottom").load("bottom-bottom.html")
				$("#footer").css({"margin-top":"40px"})
				var _index = 0;
				var $li_btn = $("#content .re_w .register ul.type .type_li")
				var $Pinp = $("#content .re_w .register .register_phone .form_inp input")
				var $Einp = $("#content .re_w .register .register_email .form_inp input")
				chajian.tab({
					anniu:"#content .re_w .register ul.type .type_li",
					pic:"#content .re_w .register .register_t .register_type",
					type:"click"
				})
				
				$li_btn.click(function(){
					_index = $(this).index();
					$(this).addClass("this").siblings().removeClass("this");
					type()
				})
				type()
				function type(){
					if(_index == 0){
					$Pinp.eq(0).blur(function(){
						var val = $(this).val()
						var reg = /^[1-3]\d{10}$/;
						if(val == ""){
							$(this).parent().next().find("span").html("-手机号不能为空")
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
						}else if(reg.test(val)){
							$(this).parent().next().find("span").html("*可以注册")
							$(this).parent().next().find("span").css({"display":"block","color":"green"})
						}else{
							$(this).parent().next().find("span").html("-手机号码不是一个有效号码")
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
						}
					})
					$Pinp.eq(1).keyup(function(){
						var val = $(this).val();
						var num = pwdChange(val);
						if(num == 0 || num == 1){
							$(this).parent().next().find(".ruo").css({"border-bottom":"2px solid red"}).siblings().css({"border-bottom":"1px solid #ccc"})
						}else if(num == 2){
							$(this).parent().next().find(".zhong").css({"border-bottom":"2px solid red"}).siblings().css({"border-bottom":"1px solid #ccc"})
						}else if(num == 3){
							$(this).parent().next().find(".qiang").css({"border-bottom":"2px solid red"}).siblings().css({"border-bottom":"1px solid #ccc"})
						}
						function pwdChange(v) {
				            var num = 0;
				            var reg = /\d/; //如果有数字
				            if (reg.test(v)) {
				                num++;
				            }
				            reg = /[a-zA-Z]/; //如果有字母
				            if (reg.test(v)) {
				                num++;
				            }
				            reg = /[^0-9a-zA-Z]/; //如果有特殊字符
				            if (reg.test(v)) {
				                num++;
				            }
				             if (v.length < 9) { //如果密码小于9
				                num = 0;
				            }
				            return num;
				       	}
					})
					$Pinp.eq(1).blur(function(){
						var val = $(this).val()
						if(val.length < 6){
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
							$(this).parent().next().find("ul").css({"display":"none"})
						}else{
							$(this).parent().next().find("span").css({"display":"none"})
							$(this).parent().next().find("ul").css({"display":"block"})
						}
					})
					$Pinp.eq(2).blur(function(){
						var val = $("#content .re_w .register .register_phone .form_inp .pass").val();
						var val1 = $(this).val()
						if(val1 != val){
							$(this).parent().next().find("span").html("-两次输入的密码不一致")
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
						}else{
							$(this).parent().next().find("span").html("*可以注册")
							$(this).parent().next().find("span").css({"display":"block","color":"green"})
						}
					})
				}else if(_index == 1){
					$Einp.eq(0).blur(function(){
						var val = $(this).val()
						var reg = /^\w+@\w+(\.\w+)+$/;
						if(val == ""){
							$(this).parent().next().find("span").html("-邮件地址不能为空")
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
						}else if(reg.test(val)){
							$(this).parent().next().find("span").html("*可以注册")
							$(this).parent().next().find("span").css({"display":"block","color":"green"})
						}else{
							$(this).parent().next().find("span").html("-邮件地址不合法")
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
						}
					})
					$Einp.eq(1).keyup(function(){
						var val = $(this).val();
						var num = pwdChange(val);
						if(num == 0 || num == 1){
							$(this).parent().next().find(".ruo").css({"border-bottom":"2px solid red"}).siblings().css({"border-bottom":"1px solid #ccc"})
						}else if(num == 2){
							$(this).parent().next().find(".zhong").css({"border-bottom":"2px solid red"}).siblings().css({"border-bottom":"1px solid #ccc"})
						}else if(num == 3){
							$(this).parent().next().find(".qiang").css({"border-bottom":"2px solid red"}).siblings().css({"border-bottom":"1px solid #ccc"})
						}
						function pwdChange(v) {
				            var num = 0;
				            var reg = /\d/; //如果有数字
				            if (reg.test(v)) {
				                num++;
				            }
				            reg = /[a-zA-Z]/; //如果有字母
				            if (reg.test(v)) {
				                num++;
				            }
				            reg = /[^0-9a-zA-Z]/; //如果有特殊字符
				            if (reg.test(v)) {
				                num++;
				            }
				             if (v.length < 9) { //如果密码小于9
				                num = 0;
				            }
				            return num;
				       	}
					})
					$Einp.eq(1).blur(function(){
						var val = $(this).val()
						if(val.length < 6){
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
							$(this).parent().next().find("ul").css({"display":"none"})
						}
					})
					$Pinp.eq(2).blur(function(){
						var val = $("#content .re_w .register .register_phone .form_inp .pass").val();
						var val1 = $(this).val()
						if(val1.length <= 6){
							$(this).parent().next().find("span").html("-登录密码不能少于6个字符")
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
						}else if(val1 != val){
							$(this).parent().next().find("span").html("-两次输入的密码不一致")
							$(this).parent().next().find("span").css({"display":"block","color":"red"})
						}else{
							$(this).parent().next().find("span").html("*可以注册")
							$(this).parent().next().find("span").css({"display":"block","color":"green"})
						}
					})
					}
				}
				
				
				$(".btn").click(function(){
					var name = $("#content .re_w .register .register_type .phone").val();
					var pass = $("#content .re_w .register .register_type .pass1").val();
					var pass2 = $("#content .re_w .register .register_type .pass2").val();
					var $inpProtocol = $(".form_xuan input")
					setCookie("name",name);
					setCookie("pass",pass);
					if(name !='' && pass !='' && pass2 != '' && $inpProtocol.is(":checked")){
						window.location.href="login.html";
					}else{
						alert('您的信息没完善!');
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="header">
			<div class="re_w">
				<h1 class="l"><a href="index.html" title="首页" ><img src="login-img/logo.jpg" title="首页" alt="首页" /></a><span>欢迎注册</span></h1>
				<p class="r">
					<a href="#" class="weixin"></a>
					<a href="#" class="sina"></a>
					<a href="#" class="qq"></a>
				</p>
			</div>
		</div>
		<div id="content">
			<div class="re_w">
				<div class="img l">
					<img src="login-img/registerPic.jpg" />
				</div>
				<div class="register r">
					<ul class="type">
						<li class="l type_li this">手机注册</li>
						<li class="l type_li">邮箱注册</li>
						<li class="l">已有账号 ! <a href="login.html"> 登录</a></li>
					</ul>
					<!--手机注册-->
					<div class="register_t">
						<div class="register_type register_phone">
							<div class="form_inp one">
								<label></label>
								<input class="phone" type="text" placeholder="手机"/>
							</div>
							<div class="form_int"><span>-手机号不能为空</span></div>
							<div class="form_inp  two">
								<label></label>
								<input class="pass" type="password" placeholder="密码"/>
							</div>
							<div class="form_int pass_int">
								<span>-登录密码不能少于6个字符</span>
								<ul class="pass_ruo">
									<li class="ruo l">弱</li>
									<li class="zhong l">中</li>
									<li class="qiang l">强</li>
								</ul>
							</div>
							<div class="form_inp three">
								<label></label>
								<input class="pass1" type="password" placeholder="确认密码"/>
							</div>
							<div class="form_int"><span>-两次输入的密码不一致</span></div>
							<div class="four">
								<div class="left l">
									<label></label>
									<input class="yanzheng" type="text" placeholder="手机验证码"/>
								</div>
								<div class="right l">
									获取手机验证码
								</div>
							</div>
							<div class="form_int"><span>-验证码错误</span></div>
							<div class="form_xuan">
								<input type="checkbox" />
								我已看过并接受
								《<a href="#">用户协议</a>》
							</div>
							<a class="btn" href="javascript:;">立 即 注 册</a>
						</div>
						<!--邮箱注册-->
						<div class="register_email register_type">
							<div class="form_inp one">
								<label></label>
								<input class="phone" type="text" placeholder="email"/>
							</div>
							<div class="form_int"><span>-邮箱地址不能为空</span></div>
							<div class="form_inp  two">
								<label></label>
								<input class="pass" type="password" placeholder="密码"/>
							</div>
							<div class="form_int pass_int">
								<span>-登录密码不能少于6个字符</span>
								<ul class="pass_ruo">
									<li class="ruo l">弱</li>
									<li class="zhong l">中</li>
									<li class="qiang l">强</li>
								</ul>
							</div>
							<div class="form_inp three">
								<label></label>
								<input class="pass1" type="password" placeholder="确认密码"/>
							</div>
							<div class="form_int"><span>-两次输入的密码不一致</span></div>
							<div class="four">
								<div class="left l">
									<label></label>
									<input class="yanzheng" type="text" placeholder="邮箱验证码"/>
								</div>
								<div class="right l">
									获取邮箱验证码
								</div>
							</div>
							<div class="form_int"><span>-验证码错误</span></div>
							<div class="form_xuan">
								<input type="checkbox" />
								我已看过并接受
								《<a href="#">用户协议</a>》
							</div>
							<a class="btn" href="javascript:;">立 即 注 册</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div class="bottom">
				<div class="bottom-bottom">
					
				</div>
			</div>
		</div>
	</body>
</html>
